<script name="flowTemplateConfig" setup>
import {onMounted, reactive, ref} from 'vue'
import {ElMessageBox, ElMessage} from 'element-plus'
import AddorEditDialog from "@/views/flowTemplateConfig/components/AddorEditDialog.vue";
import api from '@/api/index'
import {useRouter} from "vue-router";

const router = useRouter();
const formInline = reactive({})
const pageData = reactive({
  pageNum: 1,
  pageSize: 10,
  total: 0
})
const formData = ref({})
const TypeOptions = ref([])
const tableData = ref([])
const OPERTATE = [
  {alias: 'edit', label: '编辑'},
  {alias: 'editFlow', label: '编辑流程'},
  {alias: 'delete', label: '删除'},
  {alias: 'detail', label: '引用详情'},
]
const columns = [
  {alias: 'templateCode', label: '模板编号'},
  {alias: 'templateName', label: '流程模板名称'},
  {alias: 'bizTypeName', label: '业务类型'},
  {alias: 'createTime', label: '创建日期', type: 'date', width: '180px'},
  {label: '操作', listArr: OPERTATE, width: '300px', fixed: 'right', type: 'action'}
]

onMounted(() => {
  getAllType()
  onSearch()
})

const getAllType = () => {
  const params = {pageNum: 1, pageSize: 5000}
  api.reimbursement.getBizTypeList(params).then((res) => {
    TypeOptions.value = res.list || []
  })
}

const onSearch = () => {
  const params = {...formInline, ...pageData}
  api.flowTemplate.getFlowTemplatelist(params).then((res) => {
    tableData.value = res.list || []
    pageData.total = res.total || 0
  })
}
const modifyRef = ref(null)
const onAdd = () => {
  modifyRef.value.initDialog('add')
}
const onEdit = (row) => {
  modifyRef.value.initDialog('edit', row)
}
const afterCreate = (data) => {
  onSearch()
  onEditFlow(data)
}
const onEditFlow = (row) => {
  router.push({ path: '/design/process-template-designer', query: { templateId: row.id } })
}

const onDelete = (row) => {
  ElMessageBox.confirm('是否确定删除对应的记录？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    api.flowTemplate.deleteFlowTemplate(row.id).then(res => {
      ElMessage({
        type: 'success',
        message: '删除成功!'
      });
      onSearch()
    })
  })
}

const onShowDetail = (row) => {
  router.push({
    name: 'referenceDetail',
    query: {
      id: row.id
    }
  })
}

const onAction = ([item, row]) => {
  const obj = {
    'edit': onEdit,
    'editFlow': onEditFlow,
    'delete': onDelete,
    'detail': onShowDetail,
    'pageNum': onSearch,
    'pageSize': onSearch
  }
  if (typeof item === 'string') {
    pageData[item] = row
    if (item === 'pageSize') pageData.pageNum = 1
    obj[item]()
  } else {
    obj[item.alias](row)
  }
}
</script>

<template>
  <section>
    <page-view>
      <template #option>
        <div class="btn-box">
          <el-button type="primary" @click="onAdd">新增</el-button>
        </div>
      </template>
      <template #form>
        <SearchForm :data-form="formInline" @onReset="onSearch" @on-search="onSearch">
          <el-form-item prop="templateName">
            <el-input v-model.trim="formInline.templateName" clearable placeholder="请输入模板名称"/>
          </el-form-item>
          <el-form-item prop="bizTypeCode">
            <el-select v-model="formInline.bizTypeCode" filterable placeholder="请选择业务类型">
              <el-option v-for="item in TypeOptions" :key="item.typeCode" :label="item.typeName"
                         :value="item.typeCode"/>
            </el-select>
          </el-form-item>
        </SearchForm>
      </template>
      <template #table="tableScope">
        <PubilcTable :isSlot="false" :list-config="columns" :page-data="pageData"
                     :table-data="tableData" :tableHeight="tableScope.tableHeight" @on-action="onAction"/>
      </template>
    </page-view>
    <AddorEditDialog ref="modifyRef" @on-updated="onSearch" @on-created="afterCreate"></AddorEditDialog>
  </section>
</template>

<style lang="scss" scoped>

</style>
